<template>
	<view class="content">
		<view class="nav">
			<u-tabs 
			bg-color="transparent"
			bar-width="110"
			active-color="#ffffff" 
			inactive-color="#6469ff"
			:is-scroll="false" 
			:list="nav_list" 
			:current="current" 
			@change="change"></u-tabs>
		</view>
		<view class="type" v-show="current==0">
			<text @click="typeClick('')" :class="{active:active==''}">全部</text>
			<text @click="typeClick(1)" :class="{active:active==1}">买入</text>
			<text @click="typeClick(2)" :class="{active:active==2}">卖出</text>
		</view>
		<view class="order_list">
			<view class="item" v-for="item in order_list" :key='item.id'>
				<view class="top">
					<view class="lf">
						<text v-if="item.paytype == 1" class="buy">买入</text>
						<text v-else class="cut">卖出</text>
						<text>BST/USDT</text>
					</view>
					<view class="lr">
						{{item.status == 1?'':item.status == 4?'已完成':'已撤销'}}
						<u-button 
						:loading="loading" 
						v-if="item.status==1" 
						:hair-line="btnBorder" 
						class="revoke" 
						@click="backpayClick(item.id)">撤销订单</u-button>
					</view>
				</view>
				<view class="order_title">
					<text>时间</text>
					<text>委托价(USDT)</text>
					<text>委托量(BST)</text>
				</view>
				<view class="order_cont">
					<text>{{item.create_time}}</text>
					<text>{{item.price}}</text>
					<text>{{item.number}}</text>
				</view>
				<view class="order_title">
					<text>成交总额(USDT)</text>
					<text>成交均价(USDT)</text>
					<text>成交量(BST)</text>
				</view>
				<view class="order_cont">
					<text>{{item.zprice}}</text>
					<text>{{item.price}}</text>
					<text>{{item.cjnumber}}</text>
				</view>
			</view>
			<view class="msg" :class="{order_null:order_list.length<=0}">
				<u-empty v-if="order_list.length<=0" text="暂无当前委托记录" mode="list"></u-empty>
				<u-loadmore :status="status" />
			</view>
		</view>
		<u-toast ref="uToast" />
		<u-modal show-cancel-button v-model="show" :content="content" @confirm="_backpay"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				btnBorder:false,
				active:'',
				nav_list: [
					{name: '当前委托'}, 
					{name: '历史委托'},
				],
				current: 0,
				page:1,//当前页码
				list_rows:10,//每页数量
				total:0,//数据总量
				status: 'loadmore',
				order_list:[],
				order_status:'',
				id:null,
				show:false,
				content:null,
				loading:false,
			}
		},
		onReady() {

		},
		onLoad() {
			this.orderList()
		},
		onPullDownRefresh(){
			this.page=1
			this.order_list=[]
			this.orderList()
			
		},
		onReachBottom(){
			if(Math.ceil(this.total/this.list_rows)>this.page){
				this.page = this.page+1
				this.orderList()
			}else{
				
			}
		},
		methods: {
			//撤回交易
			backpayClick(e){
				this.content = '确定要撤销当前委托？'
				this.id = e
				this.show = true
			},
			_backpay(){
				this.loading = true
				this.$http({
					url:this.$api.paysell_backpay,
					method:'POST',
					hideLoading:false,
					data:{
						id:this.id
					},
					success:res=>{
						this.page=1
						this.order_list=[]
						this.orderList()
						this.$refs.uToast.show({
							title: res.msg,
							type: 'success'
						})
					},
					complete:e=>{
						this.loading = false
					}
				})
			},
			//获取订单
			orderList(){
				this.status = 'loading'
				this.$http({
					url:this.$api.paysell_getAll,
					method:'POST',
					hideLoading:true,
					data:{
						page:this.page,
						list_rows:this.list_rows,
						paytype:this.active,
						status:this.order_status
					},
					success:res=>{
						this.total = res.data.total
						if(Math.ceil(this.total/this.list_rows)<=this.page){
							this.status = 'nomore'
							
						}else{
							this.status = 'loadmore'
							
						}
						this.order_list = this.order_list.concat(res.data.data)
					},
					fail:err=>{
						this.status = 'nomore'
					},
					complete:e=>{
						uni.stopPullDownRefresh();
						if(!e.code){
							
							this.status = 'nomore'
						}
					}
				})
			},
			//切换状态
			typeClick(e){
				this.active = e
				this.page=1
				this.order_list = []
				this.orderList()
			},
			//
			change(index) {
				this.current = index;
				this.order_list = []
				this.active = ''
				
				if(index == 1){
					this.order_status = 4
				}
				if(index == 0){
					this.order_status = ''
				}
				this.orderList()
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content{
		.nav{
			width: 330rpx;
			margin: 30rpx auto 20rpx auto;
		}
		.type{
			padding: 20rpx 30rpx;
			border-bottom: 8rpx solid $border-bottom-color;
			color: #6469ff;
			text{
				padding:0 20rpx;
				font-size: 16px;
				font-weight: 600;
			}
			.active{
				color: #FFFFFF;
			}
		}
		.order_list{
			.item{
				border-bottom: 1px solid $border-bottom-color;
				padding: 28rpx 38rpx;
				>view{
					display: flex;
					justify-content: space-between;
				}
				.top{
					
					text:first-child{
						font-size: 16px;
					}
					.buy{
						color: #0cdda9;
					}
					text{
						font-size: 12px;
						color: #6279f9;
					}
					.lr{
						color: #FFFFFF;
					}
					.cut{
						color:#f45a68;
					}
					.revoke{
						border: 1px solid #FFFFFF;
						background-color: $border-bottom-color;
						color: #FFFFFF;
						height: 50rpx;
						width: 200rpx;
						border-radius: 25rpx;
						font-size: 12px;
					}
				}
				.order_title{
					padding: 18rpx 0;
					color: #6279f9;
					font-size: 12px;
					>text{
						width: 33.33%;
						text-align: center;
					}
					>text:nth-child(1){
						text-align: left;
					}
					>text:nth-child(3){
						text-align: right;
					}
				}
				.order_cont{
					color: #FFFFFF;
					font-size: 12px;
					>text{
						width: 33.33%;
						text-align: center;
					}
					>text:nth-child(1){
						text-align: left;
					}
					>text:nth-child(3){
						text-align: right;
					}
				}
			}
		}
		.msg{
			padding: 20rpx;
		}
		.order_null{
			position: fixed;
			left: 0%;
			top: 50%;
			width: 100%;
		}
	}
</style>
